<template>
    <div class="GIScontent">
        <div class="list_box">
            <el-button type="primary" :icon="listShow? 'Fold':'Expand'" class="list_box_show" @click="listShowFun"></el-button>
            
            <transition name="el-zoom-in-top">
                <div class="list" v-show="listShow">
                    <el-tabs type="border-card" style="height: 100%;">
                        <el-tab-pane label="全部">
                            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                            <ul class="list_content">
                                <li class="list_content_li" v-for="(item, index) in list" :key="item.imei" :style=" {background:item.status==0?'#f9f9f9':'' } ">
                                    <div class="li_top">
                                        <Battery :num="Number(item.electQuantity)"></Battery>
                                        <el-icon v-if="!item.collected" size="12" color="#E6A23C"><StarFilled /></el-icon>
                                        <Signal :num="item.status==0 ? 0 : 5" style="margin-left: auto;"></Signal>
                                    </div>
                                    <div class="li_info">
                                        <div class="li_info_checkbox">
                                            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                                                <el-checkbox :label="item.imei" :key="item.imei">&nbsp;</el-checkbox>
                                            </el-checkbox-group>
                                        </div>
                                        <ul class="li_info_info">
                                            <li><span>设备名称:</span>{{ item.managerName }}</li>
                                            <li><span>设备编号:</span>{{ item.imei }}</li>
                                            <li><span>部门:</span>{{ item.deptName }}</li>
                                            <li><span>标签:</span><i :style="{background:item.color}">{{ item.projectName }}</i></li>
                                        </ul>
                                    </div>
                                    <div class="li_buttons">
                                        <el-button size="small" @click="collectButton(item)">
                                           {{ item.collected ? '关&nbsp;&nbsp;&nbsp;&nbsp;注' : '已关注' }}
                                        </el-button>
                                        <el-button size="small" @click="trajectoryButton(item)">轨迹回放</el-button>
                                        <el-button size="small" @click="trackButton(item)">实时追踪</el-button>
                                        <el-button size="small" @click="detailsButton(item)">设备详情</el-button>
                                    </div>
                                </li>
                            </ul>
                        </el-tab-pane>
                        <el-tab-pane :label=" '收藏 ( ' + list2.length + ' )' ">
                            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                            <ul class="list_content">
                                <li class="list_content_li" v-for="(item, index) in list2" :key="item.imei" :style=" {background:item.status==0?'#f9f9f9':'' } ">
                                    <div class="li_top">
                                        <Battery :num="Number(item.electQuantity)"></Battery>
                                        <el-icon v-if="!item.collected" size="12" color="#E6A23C"><StarFilled /></el-icon>
                                        <Signal :num="item.status==0 ? 0 : 5" style="margin-left: auto;"></Signal>
                                    </div>
                                    <div class="li_info">
                                        <div class="li_info_checkbox">
                                            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                                                <el-checkbox :label="item.imei" :key="item.imei">&nbsp;</el-checkbox>
                                            </el-checkbox-group>
                                        </div>
                                        <ul class="li_info_info">
                                            <li><span>设备名称:</span>{{ item.managerName }}</li>
                                            <li><span>设备编号:</span>{{ item.imei }}</li>
                                            <li><span>部门:</span>{{ item.deptName }}</li>
                                            <li><span>标签:</span><i :style="{background:item.color}">{{ item.projectName }}</i></li>
                                        </ul>
                                    </div>
                                    <div class="li_buttons">
                                        <el-button size="small" @click="collectButton(item)">
                                           {{ item.collected ? '关&nbsp;&nbsp;&nbsp;&nbsp;注' : '已关注' }}
                                        </el-button>
                                        <el-button size="small" @click="trajectoryButton(item)">轨迹回放</el-button>
                                        <el-button size="small" @click="trackButton(item)">实时追踪</el-button>
                                        <el-button size="small" @click="detailsButton(item)">设备详情</el-button>
                                    </div>
                                </li>
                            </ul>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </transition>

            <div class="timeNew"><span>{{ timeNum }} 秒刷新</span></div>
        </div>
        <div class="map">
            <GISmap ref="GISmap" @setMinMapFun="setMinMapFun"></GISmap>
        </div>
        <div class="MinMap">
            <MinMap ref="MinMap"></MinMap>
        </div>
        <el-button :type="weixing ? 'primary' : 'info'" icon="PictureFilled" class="weixingButton" @click="weixingButtonFun"></el-button>
        <el-button :type="fenceState ? 'primary' : 'info'" icon="Notification" class="fenceButton" @click="fenceButtonFun"></el-button>
    </div>
</template>
  
<script>
import { getPosition, xhMapConfigDetail, xhUserCollectionDeviceAdd, xhUserCollectionDeviceDelete } from '@/api/GIS/GIS';
import { xhFenceQueryAll } from '@/api/menu.js';
import Signal from '@/components/map/Signal.vue';
import Battery from '@/components/map/Battery.vue';
import GISmap from '@/views/GIS/GIS/GISmap.vue';
import MinMap from '@/components/map/MinMap.vue';

import { configStore } from '@/store/modules/config'; //pinia
const configStorePinia = configStore();

export default {
name: "GIS",
data() {
    return {
        key:0,
        download:true,
        loading:true,
        list:[],
        weixing:false,
        timeNum:30,
        timeoutId: null,

        checkedCities: [], // 已选中的
        cities: [], // 所有，用于全选逻辑
        checkAll: false, // 控制全选复选框的状态
        isIndeterminate: true, // 控制全选复选框的不确定状态
        
        listShow: true,

        fenceList: null,
        fenceState: false, 
    };
},
computed: {
    mapConfig() {
        return configStorePinia.mapConfig;
    },
    list2() {
        return this.list.filter(item => !item.collected);
    },
},
components:{
    Signal,
    Battery,
    GISmap,
    MinMap,
},
created() {
},
mounted() {
    this.mapConfigFun();
},
methods: {
    fun(){
        console.log(this.key);
    },
    //设备详情
    detailsButton(row){
        let data = {
            imei : row.imei,
        };
        this.$router.push({path:"/manageDevices/devicesList", query:data})
    },
    //关注
    collectButton(row){
        if(this.loading){
            this.loading = false;
            if(row.collected){
                xhUserCollectionDeviceDelete(row.imei).then(res =>{
                    this.getPositionFun();
                });
            }else{
                xhUserCollectionDeviceAdd({deviceId: row.imei}).then(res =>{
                    this.getPositionFun();
                });
            };
        }
    },
    //实时追踪
    trackButton(row){
        this.$refs.GISmap.setMarker('marker'+row.imei);
        this.listShow = false;
    },
    //轨迹回放
    trajectoryButton(row){
        let data = {
            imei : row.imei,
        };
        this.$router.push({path:"/history/trajectory", query:data})
    },
    // 地图加载设备坐标
    markerListFun(){
        let data = this.list.filter(item => {
            if (this.checkedCities.includes(item.imei)) {
                item.key = this.key; // 直接修改 item，添加 key 属性
                return true; // 保留此项
            }
            return false; // 过滤掉不满足条件的项
        });
        
        this.$refs.GISmap.markerListFun(data);
    },
    //围栏
    fenceButtonFun(){
        if(!this.fenceList){
            xhFenceQueryAll().then(response=>{
                console.log('获取全部围栏', response);
                this.fenceList = response;
                this.$refs.GISmap.fencelistFun(this.fenceList).then(res=>{
                    console.log(res);
                    this.fenceState = res > 0;
                });
            });
        }else{
            if(!this.fenceState){
                this.$refs.GISmap.fencelistFun(this.fenceList).then(res=>{
                    console.log(res);
                    this.fenceState = res > 0;
                });
            }else{
                this.$refs.GISmap.clearFence().then(res=>{
                    console.log(res);
                    this.fenceState = res > 0;
                });
            }
        };
    },
    //卫星图
    weixingButtonFun(){
        this.$refs.GISmap.weixing().then(res => {
            this.weixing = res;
        });
    },
    //获取地图配置
    mapConfigFun(){
        xhMapConfigDetail().then(res=>{
            if(res){
                configStorePinia.mapConfigPiniaFun(res);
                this.addMapCase();
            }else{
                this.addMapCase();
            };
            console.log(this.mapConfig, '获取配置');
            
        });
    },
    //加载地图
    addMapCase(){
        this.$refs.GISmap.addMapCase().then(res=>{
            console.log(res);
            if(res == '地图加载完执行'){
                this.getPositionFun();
                let mapTime = setTimeout(() => { // 小地图延时加载
                    this.$refs.MinMap.addMapCase().then(res =>{
                        console.log(res);
                        clearTimeout(mapTime);
                        mapTime = null;
                    });
                }, 1000);
            }
        });
    },
    //获取 最近 list
    getPositionFun(){
        this.timeNum = '...获取最新定位信息';
        getPosition().then(res=>{
            this.key++;
            console.log(res, 'key', this.key);
            this.list = res;
            this.cities = res.map(item => item.imei);
            this.markerListFun();
            console.log(this.cities);
            this.timeNum = 30;
            
            this.timeFun();
            if(this.download){ //执行一次 默认加载在线坐标
                this.downloadState();
            }

            this.loading = true;
        });
    },
    //定时器
    timeFun(){
        if (this.timeoutId) {
            clearTimeout(this.timeoutId);
            this.timeoutId = null;
        }
        this.timeoutId = setTimeout(() => {
            if( this.timeNum < 1 ){
                this.getPositionFun();
            }else{
                this.timeNum --;
                this.timeFun();
            }
        },1000);
    },
    //执行一次在线状态
    downloadState(){
        this.checkedCities = this.list
            .filter(item => item.status == 1)
            .map(item => item.imei);
        this.markerListFun();
        this.download = false;
    },
    //多选框 all
    handleCheckAllChange(val) {
        console.log(val);
        this.checkedCities = val ? this.cities.slice() : [];
        this.isIndeterminate = false;
        this.markerListFun();
    },
    //多选框
    handleCheckedCitiesChange(value) {
        console.log(this.checkedCities);
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        this.markerListFun();
    },
    //设置缩略图
    setMinMapFun(center, zoom){
        //console.log(center, zoom);
        this.$refs.MinMap.setMap(center, zoom);
    },
    //隐藏list
    listShowFun(){
        this.listShow = !this.listShow;
    },
},
beforeDestroy() {
    // 组件销毁前清除 setTimeout
    if (this.timeoutId) {
        clearTimeout(this.timeoutId);
    }
},
};
</script>
<style lang='scss' scoped>
.GIScontent{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    position: relative;
    background: #eee;
}
.weixingButton{
    position: absolute;
    top:10px;
    right: 10px;
}
.fenceButton{
    position: absolute;
    top:10px;
    right: 60px;
}
.MinMap{
    position: absolute;
    bottom:10px;
    right: 10px;
    width: 192px;
    height: 108px;
    border:solid 1px #eee;
    background: #fff;
}
.list_box{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    z-index: 9;
}
.list{
    width: 360px;
    height: 100%;
    background: #fff;
}
.list_content{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    .list_content_li{
        border:solid 1px #DCDFE6;
        padding: 5px;
    }
    .li_info{
        display: flex;
        .li_info_checkbox{
            display: flex;
            flex-direction: column;
            justify-content:center;
        }
        .li_info_info{
            display: flex;
            flex-direction: column;
            padding: 10px 5px;
            gap:5px;
            font-size: 12px;
            span{
                color: #999;
                padding-right: 5px;
            }
            i{
                padding: 2px 5px;
                color: #fff;
                border-radius: 5px;
            }
        }
    }
}
.li_top{
    display: flex;
}
.timeNew{
    background: #fff;
    padding: 2px 10px;
    position: absolute;
    top: 10px;
    border:solid 1px #DCDFE6;
    font-size: 12px;
    color: #999;
    left: calc(100% + 50px);
    white-space: nowrap;
}
.list_box_show{
    position: absolute;
    left: calc(100% - 5px);
    top: 10px;
}
.li_buttons{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 2px;
    .el-button+.el-button{
        margin: 0;
        flex-grow:1;
    }
}
.map{
    width: 100%;
    height: 100%;
}
</style>

<style lang='scss'>
.GIScontent .el-tabs__content{
    height: calc(100% - 39px);
    .el-tab-pane{
        width: 100%;
        height: 100%;
    }
}
</style>
  